<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伸缩布局</title>
    <!-- 
        伸缩布局
        1.主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
        2.侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
        3.方向：默认主轴从左向右，侧轴默认从上到下
        4.主轴和侧轴并不是固定不变的，通过flex-direction可以互换
        5.一旦父元素设置了display: flex，则开启了伸缩布局，父元素中每一个子元素变成伸缩项，不再区分行内元素和块级元素 
    -->
    <style>
        .box1{
            width: 500px;
            height: 300px;
            /* 开启伸缩布局 */
            display: flex;

            /* 默认是row 水平位置 从左到右 */
            flex-direction: row;
            /* column 垂直位置 从上到下 */
            /* flex-direction: column; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column-reverse; */
        }

        .box1 .item1{
            /* 各占一份 */
            flex: 1;
            border: 1px solid black;
            background-color: lightcoral;
        }


        .box2{
            width: 500px;
            height: 300px;
            /* 开启伸缩布局 */
            display: flex;

            /* row水平位置从左至右排列  wrap允许换行 ，通过flex-flow简化编写 */
            /* flex-direction: row;
            flex-wrap: wrap; */
            flex-flow: row wrap;
            background-color: lightblue;
        }

        .box2 .item2{
            width: 120px;
            height: 200px;
            /* 各占一份 */
            /* flex: 1; */
            border: 1px solid black;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="box1">
        <span class="item1">1</span>
        <span class="item1">2</span>
        <span class="item1">3</span>
        <span class="item1">4</span>
        <span class="item1">5</span>
        <span class="item1">6</span>
    </div>

    <br><br><br>

    <div class="box2">
        <span class="item2">1</span>
        <span class="item2">2</span>
        <span class="item2">3</span>
        <span class="item2">4</span>
        <span class="item2">5</span>
        <span class="item2">6</span>
    </div>
</body>
</html>